<template lang="">
    <div class="box-maxs">
        <div class="box">
            <ul v-if="!emptyList" v-infinite-scroll="load" :infinite-scroll-immediate="false" class="infinite-list"
                style="overflow: auto;" ref="scrollContainer">
                <li v-for="(item, index) in collectList" :key="index" @click="onVideo(item.videoId)" class="box-img">
                    <el-image style="width: 100%; height: 22rem" :src="item.coverUrl" fit="cover" />
                    <div class="box-card-text">
                        <div class="card-text-num">
                            <p>
                                <font-awesome-icon :icon="['fas', 'heart']" />
                                {{ item.likeCount }}
                            </p>
                            <p>
                                <font-awesome-icon :icon="['fas', 'thumbs-up']" />
                                {{ item.collectionCount }}
                            </p>
                        </div>
                        <div class="card-text-title">
                            <div class="top">
                                <p> {{ item.title }}<span
                                        v-for="(items,indexs) in item.categories">#{{ items.categoryName }}</span>
                                </p>
                            </div>
                            <div class="bottom">
                                <p>@{{ item.author.nickname }}</p>
                                <p>{{ item.time }}</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li  v-for="(item,index) in 10" :key="index" class="skeleton-loding">
                    <el-skeleton class="skeleton" :loading="loading" animated>
                        <template #template>
                            <div>
                                <el-skeleton-item variant="image" style="width: 100%; height: 22rem" />
                                <div style="padding-top: 1rem">
                                    <el-skeleton-item variant="h3" style="width: 100%;margin-top: 0.3rem;" />
                                    <div style="display: flex;align-items: center;justify-items: space-around;margin-top: 1.6rem;height: 16px;">
                                        <el-skeleton-item variant="text" style="margin-right: 16px" />
                                        <el-skeleton-item variant="text" style="width: 30%" />
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template #default>
                        </template>
                    </el-skeleton>
                </li>
            </ul>

            <!-- 空状态 --> 
            <div v-if="emptyList" class="box-emptyList">
                <div class="emptyList">
                    <Vue3Lottie ref="emptyLottieContainer" :animationData="emptyJson" height="40%" width="40%" />
                    <p>还没有数据哎！</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {
    useRoute,
    useRouter
} from "vue-router"
import {
    ref,
    onMounted,
    watch
} from 'vue'
import {
    getCollectList
} from '@/apis/api/list';
import emptyJson from '../../assets/lottie/empty.json';

const $route = useRoute()
const $router = useRouter()


const collectList = ref([])

const page = ref(1)
const pageSize = ref(10)

let requestAwait = false
const loading = ref(true) // 判断是否加载完成后的dom，false为加载完成，true为加载中

const emptyList = ref(false)      // 判断当前数据列表是否为空

onMounted(() => {
    emptyList.value = false
    getData()
})

const load = () => {
    if (requestAwait) {
        return
    }
    requestAwait = true
    page.value++
    getData()
}

const getData = async () => {
    const params = {
        page: page.value,
        pageSize: pageSize.value
    }
    try {
        loading.value = true
        const res = await getCollectList(params)
        if(res.code === 8) {
            $router.push({
                name:"home",
                query:{
                    refresh:true
                }
            })
        }
        requestAwait = false
        if (res.data) {
            collectList.value.push(...res.data)
            loading.value = false
            return
        }else if(res.code===0 && res.data===null) {
            loading.value = false
            if(!collectList.value.length) {
                emptyList.value = true
                return
            }
        }
        // 防止请求首页时返回为空时循环请求
        if (page.value !== 1) {
            page.value = 0
            load()
        }
        loading.value = false
    } catch (error) {
        console.log(error);
    }

}

const onVideo = (videoId) => {
    $router.push({
        name: "video",
        query: {
            videoId,
            categoryId: '99',
            page: page.value
        }
    })

}
</script>

<style scoped>
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.waterfall-item {
    position: absolute;
    left: 0;
    top: 0;
}

.waterfall-item img {
    display: black;
}

.box-maxs {
    width: 100%;
    height: 100%;
    padding: 1rem;
    box-sizing: border-box;
}

.box {
    width: 100%;
    height: 100%;
}

.infinite-list {
    min-height: 84vh;
    height: 84vh;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.7rem;
}

.scr {
    width: 100%;
    height: 100%;
}

.box-img {
    width: 17.6rem;
    height: 28.6rem;
    margin-bottom: 2rem;
    cursor: pointer;
    border-radius: 1rem;
    overflow: hidden;
    background-color: rgb(245, 245, 245);
    color: rgba(0, 0, 0, 0.9);
    transition: box-shadow 0.3s;
}

.box-img:hover {
    background-color: #626aef;
    color: white;
    box-shadow: 0.8rem 0.8rem 0.8rem rgb(178, 178, 178);
}

.box-img>img {
    width: 100%;
}

.box-card-text {
    display: flex;
    flex-direction: column;
    position: relative;
}

.card-text-num {
    height: 2rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    align-items: center;
    position: absolute;
    bottom: 100%;
    color: rgba(255, 255, 255, 0.8);
}

p {
    padding: 0;
    margin: 0;
}

.card-text-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.8rem;
}

.card-text-title>.top {
    height: 3rem;
    overflow: hidden;
}

.card-text-title>.bottom {
    display: flex;
    justify-content: space-between;
}

.skeleton {
    width: 100%;
    height: 100%;
}


.skeleton-loding {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.7rem;
}

.skeleton-loding>div {
    width: 17.6rem;
    height: 28.6rem;
    margin-bottom: 2rem;
    cursor: pointer;
    border-radius: 1rem;
    overflow: hidden;
}

.box-emptyList {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emptyList {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.emptyList>p {
    text-align: center;
    font-size: 1.4rem;
}
</style>